<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>给李奥曼的小惊喜 💖</title>
  <style>
    html, body {
      margin: 0;
      height: 100%;
      overflow: hidden;
      font-family: "Comic Sans MS", "Microsoft YaHei", sans-serif;
      background: radial-gradient(circle at 20% 20%, #ffe4e1, #ffd6e0, #fff0f5);
      animation: bgFlow 10s ease-in-out infinite alternate;
    }

    @keyframes bgFlow {
      0% { background: radial-gradient(circle at 20% 20%, #ffe4e1, #ffd6e0, #fff0f5); }
      50% { background: radial-gradient(circle at 80% 80%, #ffc1cc, #ffe4e1, #fff0f5); }
      100% { background: radial-gradient(circle at 50% 50%, #ffd1df, #fff0f5, #ffe4e1); }
    }

    .center-box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #ff4f81;
      animation: fadeIn 2s ease forwards;
    }

    .center-box h1 {
      font-size: 28px;
      margin-bottom: 20px;
    }

    .btn {
      background: linear-gradient(45deg, #ff8fab, #ffc0cb);
      border: none;
      color: white;
      padding: 12px 26px;
      border-radius: 25px;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 10px rgba(255, 143, 171, 0.4);
    }

    .btn:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 14px rgba(255, 143, 171, 0.6);
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translate(-50%, -45%) scale(0.9); }
      to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }

    .popup {
      position: absolute;
      padding: 14px 22px;
      border-radius: 18px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      color: white;
      font-size: 16px;
      opacity: 0;
      transition: opacity 2s ease-in-out;
      z-index: 10;
    }

    .heart {
      position: absolute;
      color: rgba(255, 105, 180, 0.4);
      font-size: 20px;
      animation: floatHeart 6s linear infinite;
      z-index: 1;
    }

    @keyframes floatHeart {
      from { transform: translateY(0) scale(1); opacity: 1; }
      to { transform: translateY(-100vh) scale(2); opacity: 0; }
    }
  </style>
</head>
<body>
  <div class="center-box" id="startPage">
    <h1>✨ 这是为 <b>李奥曼</b> 专门定制的小程序 ✨</h1>
    <p>准备好接受惊喜了吗？💗</p>
    <button class="btn" onclick="startMagic()">点击开启浪漫</button>
  </div>

  <script>
    const messages = [
      "你笑起来真好看 💕",
      "遇见你是我最甜的意外 🍬",
      "愿你被世界温柔以待 🌷",
      "你是我心中的小太阳 ☀️",
      "爱你，是我写过最浪漫的代码 💻❤️",
      "想把所有温柔都送给你 💌",
      "你比星星更闪亮 ✨",
      "全世界都没你可爱 🐰",
      "喜欢你，每天都更新不完 🌸",
      "此生有你，足够浪漫 💞",
      "和你在一起，是我此生最幸运的事 💫",
      "你的名字是我听过最温柔的旋律 🎵",
      "世界因为你而变得更甜 🌈",
      "每一秒都想你一点点 ❤️"
    ];

    const colors = [
      "#ff9aa2", "#ffb7b2", "#ffdac1", "#e2f0cb",
      "#b5ead7", "#c7ceea", "#fbcffb", "#ffd6e0", "#fff5ba"
    ];

    function startMagic() {
      document.getElementById("startPage").remove();
      createHearts();
      setInterval(() => createHearts(), 600);
      startPopups();
    }

    function createHearts() {
      const heart = document.createElement("div");
      heart.className = "heart";
      heart.innerHTML = "❤";
      heart.style.left = Math.random() * window.innerWidth + "px";
      heart.style.fontSize = (Math.random() * 20 + 10) + "px";
      heart.style.animationDuration = (Math.random() * 4 + 4) + "s";
      document.body.appendChild(heart);
      setTimeout(() => heart.remove(), 6000);
    }

    function startPopups() {
      setInterval(() => {
        const div = document.createElement("div");
        div.className = "popup";
        div.innerText = messages[Math.floor(Math.random() * messages.length)];
        div.style.background = colors[Math.floor(Math.random() * colors.length)];
        div.style.left = Math.random() * (window.innerWidth - 150) + "px";
        div.style.top = Math.random() * (window.innerHeight - 100) + "px";
        document.body.appendChild(div);
        setTimeout(() => div.style.opacity = 1, 50);
        // 弹窗不删除，让它叠加堆叠出温馨画面
      }, 400);
    }
  </script>
</body>
</html>
